<template>
    <div>
        <div  v-if="disabled">
        <template v-for="(file,index) in fileList">
            <el-image
                    style="width: 100px; height: 100px"
                    :src="file.url"
                    :key="index"
                    :preview-src-list="[file.url]">
            </el-image>
        </template>
        </div>
    <el-upload
            v-else
            list-type="picture-card"
            :action="mainAction"
            :on-remove="handleRemove"
            :on-success="successHandle"
	    :headers="headers"
            :on-preview="handlePreview"
            accept="image/*"
            :file-list="fileList"
            v-bind="$attrs" v-on="$listeners"
            :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus avatar-uploader-icon"></i>
        <div slot="tip" class="el-upload__tip">
            <slot name="desc"></slot>
        </div>

    </el-upload>
    </div>
</template>
<script>
    import { getToken } from "@/utils/auth"; // 获取登录用户信息
    export default {
        model: {
            prop: "value",
            event:"input"
        },
        name:"MyUploadImage",
        props:{
            value:{
                type:String,
                default:undefined
            },
            desc:{
                type:String,
                default:undefined
            },
            previewOrDownload:{
                type:String,
                default:'preview'
            },
            uploadUrl:{
                type:String,
                default:'/api/upload_file/'
            },
            disabled:{
                type:Boolean,
                defalut:false
            }
        },
        data() {
            return{
                previewUrl:"",
                visible:false,
                fileList:[]
            }
        },
        created() {
            this.initFilesList()
        },
        watch:{
        },
        computed: {
            headers(){
                return{
                    Authorization: "JWT " +getToken()
                };
            },
            mainAction() {
                return process.env.VUE_APP_BASE_API + this.uploadUrl;
            },
        },
        methods:{
            initFilesList(){
                if (this.value){
                    let fileList = [];
                    let _list = this.value.split(",");
                    for (let i = 0; i < _list.length; i++) {
                        let _ary = _list[i].split("|");
                        let _name = _ary[0];
                        fileList.push({name: _name, url: _list[i], id: i,realUrl:_list[i]})
                    }
                    this.fileList = fileList
                }else{
                    this.fileList = []
                }
            },
            getFileList(list){
                let _files = list.map(item=>{
                    return item.realUrl
                }).join(",");
                return _files
            },
            handlePreview(file){
                if(this.previewOrDownload=="download"){
                    window.open(file.url)
                }else{
                    this.visible=true;
                    this.previewUrl = file.realUrl;
                }
            },
            handleRemove(file, fileList) {
                // this.fileList = fileList.filter(item => {
                //     return item.uid != file.uid
                // })
                this.fileList = fileList;
                this.$emit("input",this.getFileList(fileList))
            },
            successHandle(res, file, fileList) {
                if (res.code == 0) {
                    this.fileList.push({
                        name: file.name,
                        url:  res.data.file_path,
                        realUrl:res.data.file_path,
                        uid: file.uid
                    });
                    this.$emit("input",this.getFileList(this.fileList))
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 20;
                if (!isLt2M) {
                    this.$message.error('图片大小不能超过 20MB!');
                }
                return isLt2M;
            }
        }
    }
</script>
